<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入组件库 -->
    <script src="index.js"></script>
    <script src="axios.min.js"></script>


</head>
<body>
<div id="app">
    <el-form ref="form" :inline="true" :model="form" class="demo-form-inline" label-width="80px">
        <el-form-item label="测试环境">
            <el-select v-model="form.envId" placeholder="请选择测试环境">
                <el-option v-for="data in envs" :label="data.name" :value="data.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="测试功能">
            <el-select v-model="form.functionId" placeholder="请选择活动区域">
                <el-option v-for="data in functions" :label="data.name" :value="data.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="商户选择">
            <el-select v-model="form.merchantId" placeholder="请选择商户">
                <el-option v-for="data in merchants" :label="data.number" :value="data.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">获取token</el-button>
<!--            <el-button type="primary" @click="onSubmit">获取token并打开页面</el-button>-->
        </el-form-item>
    </el-form>
    <div v-if="form.envId != ''" v-for="env in envs" >
        <el-card class="box-card" v-if="form.envId == env.id">
            <div slot="header" class="clearfix">
                <span>测试环境</span>
            </div>
            <div class="text item" label="名称">名称
                <el-tag>
                    {{env.name}}
                </el-tag>
            </div>
            <div label="请求token地址">请求token地址
                <el-tag>
                    {{env.url}}
                </el-tag>
            </div>
            <div label="h5前缀">h5前缀
                <el-tag>
                    {{env.prefix}}
                </el-tag>
            </div>
        </el-card>
    </div>
    <div v-if="form.merchantId != ''" v-for="merchant in merchants">
        <el-card class="box-card" v-if="form.merchantId == merchant.id">
            <div slot="header" class="clearfix">
                <span>商户</span>
            </div>
            <div class="text item">商户名称：
                <el-tag>
                    {{merchant.number}}
                </el-tag>
            </div>
            <div class="text item">密码：
                <el-tag>
                    {{merchant.password}}
                </el-tag>
            </div>
            <div class="text item">appId:
                <el-tag>
                    {{merchant.appId}}
                </el-tag>
            </div>
            <div class="text item">商户私钥:
                <el-tag>
                    {{merchant.privatekey}}
                </el-tag>
            </div>
            <div class="text item">商户公钥:
                <el-tag>
                    {{merchant.publickey}}
                </el-tag>
            </div>
            <div class="text item">平台公钥:
                <el-tag>
                    {{merchant.platformkey}}
                </el-tag>
            </div>
        </el-card>
    </div>
    <div v-if="token != '' ">
        <el-card class="box-card" :span="8">
            <div slot="header" class="clearfix">
                <span>获取结果</span>
            </div>
            <div class="text item">token ：
                <el-input
                        v-model="token"
                        :disabled="true"
                        type="textarea">
                </el-input>
                <el-button @click.stop="copyVal(token)" type="primary"> 复制　</el-button>

                <el-input
                        v-model="fullUrl"
                        :disabled="true"
                        type="textarea">
                </el-input>
                <el-button @click.stop="copyVal(fullUrl)" type="primary"> 复制　</el-button>
                <el-button type="primary" @click.stop="openWindow(fullUrl)"> 打开页面　</el-button>
            </div>
        </el-card>
    </div>
    <div v-if="errorResp != '' ">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>错误返回</span>
            </div>
            <div class="text item" style="display:flex;flex-wrap: wrap;">返回：
                <el-tag>
                    {{errorResp}}
                </el-tag>
            </div>
        </el-card>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            token: "",
            fullUrl: "",
            errorResp: "",
            message: "thisis",
            form: {
                envId: "",
                functionId: "",
                merchantId: "",
            },
            envs: [{
                id: "",
                name: "",
                url: "",
                prefix: ""
            }],
            functions: [{
                id: "",
                name: "",
                url: "",
                code: ""
            }],
            merchants: [{
                id: "",
                number: "",
                password: "",
                appId: "",
                privatekey: "",
                publickey: "",
                platformkey: "",
            }]
        },
        mounted() {
            axios.get("/config").then(resp => {
                if (resp.status === 200) {
                    this.envs = resp.data.envs;
                    this.functions = resp.data.functions;
                    this.merchants = resp.data.merchants;
                }
            })
            console.log(this.envs);
        },
        methods: {
            onSubmit() {
                this.token = "";
                this.errorResp = "";
                axios.get("/token?envId=" + this.form.envId + "&functionId=" + this.form.functionId + "&merchantId=" + this.form.merchantId).then(resp => {
                    console.log(resp)
                    if (resp.status === 200 && resp.data.code === 200) {
                        this.token = resp.data.obj.body.token;
                        this.fullUrl = resp.data.obj.prefix + this.token + '#/?accessToken=' + this.token ;
                    } else {
                        this.errorResp = JSON.stringify(resp.data);
                    }
                }).catch(error => {
                    this.errorResp = error;
                })
            },
            // 复制操作
            copyVal(context) {
                // 创建输入框元素
                let oInput = document.createElement('input');
                // 将想要复制的值
                oInput.value = context;
                // 页面底部追加输入框
                document.body.appendChild(oInput);
                // 选中输入框
                oInput.select();
                // 执行浏览器复制命令
                document.execCommand('Copy');
                // 弹出复制成功信息
                this.$message.success('复制成功');
                // 复制后移除输入框
                oInput.remove();
            },
            openWindow(url) {
                window.open(url);
            }
        }
    })
</script>
</html>